<template>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="nameTitle">{{name}}动态</span>
                <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
            <template v-if="card_data && card_data.length>0" >
                <!-- <div v-for="(item,index) in card_data" :key="'card_data'+index" class="text item"> -->
                    <!-- <li class="card_list">
                        <img class="icon" :src="item.iconUrl" alt="头像">
                        <div class="list_content">
                            <div class="top">
                                <div class="title">
                                    <p class="name"  @click="toward(item)">{{item.showName?item.showName:item.name}}</p>
                                    <span>-</span>
                                    <span>{{item.name}}</span>
                                </div>
                                <span class="time">{{item.postTime}}</span>
                            </div>
                            <p class="description">{{item.postContent}}</p>
                        </div>
                    </li> -->
                    <template v-for=" (item,index) in card_data" >
                        <article-info :key="index" :info="item"></article-info>
                    </template>
                    <li class="card_list prev_next">
                        <el-button-group>
                            <el-button class="prev" type="primary" :disabled="curpage <= 1" @click="selectPrev('facebook')" icon="el-icon-arrow-left" >上一页</el-button>
                            <el-button class="next" type="primary" :disabled="curpage >= totalpage" @click="selectNext">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        </el-button-group>
                    </li>
                <!-- </div> -->
            </template>
            <p v-else class="noData">暂无数据</p>
        </el-card>
</template>
<script>
import {getTypesData} from '@/api/statistics'
const ArticleInfo = () => import('../workBench/article-info.vue')
export default {
    data () {
        return {
            // 当前页
            curpage: 1,
            // 页数量
            pagesize: 10,
            // 总页数
            totalpage: 0,
            card_data: []
        }
    },
    props: {
        name: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: ''
        }
    },
    created () {
    },
    components: {
        ArticleInfo
    },
    mounted () {
        this.getTypesData()
    },
    destroyed () {
    },
    methods: {
        // 跳转链接
        toward (object) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${object.objectType}&instanceUri=${object.rowkey}&objectUri=${object.objectUri}&displayName=${object.showName ? object.showName : object.displayName}&icon=${object.iconUrl}&name=${object.name}&belongGroup=${object.belongGroup}`
                window.open(currentUrl, '')
            // if (object.objectType == 'com.scistor.object.entity') {
            //     currentUrl = `${currentUrl}#/display?objectType=${object.objectType}&instanceUri=${object.rowkey}&objectUri=${object.objectUri}&displayName=${object.showName ? object.showName : object.displayName}&icon=${object.iconUrl}&name=${object.name}&belongGroup=${object.belongGroup}}`
            //     window.open(currentUrl, '')
            // } else {
            //     currentUrl = `${currentUrl}#/obj-show?objectType=${object.objectType}&instanceUri=${object.rowkey}&objectUri=${object.objectUri}&displayName=${object.showName ? object.showName : object.displayName}&icon=${object.iconUrl}&name=${object.name}&belongGroup=${object.belongGroup}`
            //     window.open(currentUrl, '')
            // }
        },
        getTypesData () {
            let params = {
                curpage: this.curpage,
                pagesize: this.pagesize
            }
            getTypesData(this.type, params).then((response) => {
                if (response.status == 200) {
                    // this.monitorRoleStatistics = response.data
                    this.card_data = response.data.list
                    if (response.data.count % this.pagesize > 0) {
                        this.totalpage = Math.floor(response.data.count / this.pagesize) + 1
                    } else {
                        this.totalpage = Math.floor(response.data.count / this.pagesize)
                    }
                }
            })
        },
        // 上一页
        selectPrev () {
            if (this.curpage <= 1) {

            } else {
                this.curpage = this.curpage - 1
                this.getTypesData()
            }
        },
        // 下一页
        selectNext () {
            if (this.curpage >= this.totalpage) {

            } else {
                this.curpage = this.curpage + 1
                this.getTypesData()
            }
        }
    }

}
</script>
<style lang="less" scoped>
.box-card{
    width:49.5%;
    margin-bottom: 20px;
    position: relative;
    &:nth-child(2n){
        margin-left: 0.5%;
    }
    &:nth-child(2n+1){
        margin-right: 0.5%;
    }
    .nameTitle{
        color: #14171a;
        font-size: 14px;
        font-weight: bold;
    }
    .card_list{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 10px;
        border-bottom:1px solid#e7ecf0;
        &:hover{
            background: #f6f8fa;
        }
        &.prev_next{
            padding:0;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom:0;
            left:0;
            width:100%;
            background: #ffffff;
            box-shadow: -1px 3px 10px #ccc;
            text-align: center;
            .prev,.next{
                padding: 5px 20px;
                margin: 5px;
            }
        }
        img.icon{
            width:40px;
            border-radius: 50%;
        }
        .list_content{
            padding-left: 15px;
            flex:1;
            overflow: hidden;
            word-break: break-all;
            line-height: 20px;
            .top{
                display: flex;
                align-items:center;
                justify-content: space-between;
                div.title{
                    display: flex;
                    align-items: center;
                    flex-shrink: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    p.name{
                        color: #14171a;
                        font-size: 14px;
                        font-weight: bold;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        line-height: 40px;
                        &:hover{
                            color:#00a2f9;
                            cursor: pointer;
                            text-decoration: underline
                        }
                    }
                    span{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding-left: 10px;
                        max-width: 100px;
                    }
                }
                .time{
                    white-space: nowrap;
                }
            }
            .description{
                padding:5px 0;
            }
        }
        .text_content{
            flex:1;
            &.text-two-line{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

    }
    .noData{
        position: absolute;
        width: 100%;
        height:100%;
        top:0;
        left:0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
